<template>
  <div class="search-form-container">
    <el-form
      label-width="100px"
      inline
      :model="searchForm"
    >
      <el-select
        size="small"
        class="input"
        v-model="searchForm.deviceUuid"
        filterable
        reserve-keyword
        placeholder="设备名称"
        remote
        :remote-method="remoteDeviceSearch"
        :loading="remoteLoading"
        clearable
      >
        <el-option
          v-for="item in deviceList"
          :key="item.uuid"
          :value="item.uuid"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        clearable
        placeholder="报警状态"
        v-model="searchForm.status"
      >
        <el-option
          v-for="item in optionStatus"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        clearable
        placeholder="报警类型"
        v-model="searchForm.type"
      >
        <el-option
          v-for="item in alarmTypeOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="search"
        :loading="searchForm.btnLoading"
      >查询</el-button>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { queryDeviceListApi } from '../../../api/device';
import { parseError } from '../../../utils';
import { AlarmStatus, AlarmType } from '../../../constants/alarm';
export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      optionStatus: [
        {
          label: '未处理',
          value: AlarmStatus.Unprocessed
        },
        {
          label: '已处理',
          value: AlarmStatus.Processed
        }
      ],
      alarmTypeOptions: [
        {
          label: '报警',
          value: AlarmType.Alarm
        },
        {
          label: '预警',
          value: AlarmType.Alert
        }
      ],
      deviceList: [],
      remoteLoading: false
    };
  },
  created() {
    this.remoteDeviceSearch();
  },
  methods: {
    search() {
      this.$emit('search');
    },
    remoteDeviceSearch(name) {
      this.remoteLoading = true;
      queryDeviceListApi(name, 10)
        .then(res => (this.deviceList = res))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin: 0 10px 10px 10px;
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
